<template>
	<view class="Global">
	<!-- 背景图片铺满 -->
	<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image>、 -->
	<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>



		<!-- 搜索栏 -->
	<!-- 	<view class="searchContentOut">
			<view class="searchContent">
				<input type="text" value="111" class="searchInput" />
				<view class="searchBg">
					<image src="../../../static/gongzuotai/sousuo@2x.png" class="searchImg" mode=""></image>
				</view>
			</view>
		</view> -->
			<searchInput :inputcontent="inputcontent" @sendData="getInputValue"></searchInput>





		<!-- 筛选栏 -->
<!--		<view class="searchPickerContent">

			<view class="searchPickerContentBg">
				<text class="searchPickerText">部门</text>
				<image class="searchPickerImg" src="../../../static/gongzuotai/xia_jiantou@2x.png" mode=""></image>
			</view>

			<view class="searchPickerContentBg">
				<text class="searchPickerText">工序</text>
				<image class="searchPickerImg" src="../../../static/gongzuotai/xia_jiantou@2x.png" mode=""></image>
			</view>

		</view>-->
		<view class="searchPickerContent" id="main">

			<view class="searchPickerContentBg">
        <picker mode="date" :value="queryData.createTimeStart" :start="startDate" :end="endDate" @change="bindDateChange">
          <view class="searchPickerText" v-if="queryData.createTimeStart==''">选择开始时间</view>
          <view class="searchPickerText" v-else>{{queryData.createTimeStart}}</view>
        </picker>
			</view>

			<view class="searchPickerContentBg">
        <picker mode="date" :value="queryData.createTimeEnd" :start="startDate" :end="endDate" @change="bindEndDateChange">
          <view class="searchPickerText" v-if="queryData.createTimeEnd==''">选择结束时间</view>
          <view class="searchPickerText" v-else>{{queryData.createTimeEnd}}</view>
        </picker>
			</view>

		</view>





		<!-- 列表数据 -->
		<scroll-view scroll-y="true" class="listDataOut"  :style="'height:'+scrollViewHeight+'px'">
			<view  class="contentListOutInner">

				<view @click="openBottom(item)" class="listDataInner" v-for="(item,index) in listData">

					<view class="listDataInnerTop">
						<view class="listDataInnerTopLeft">
              <image class="listDataInnerTopLeftImg" v-if="item.styleImgs!=''" :src="apiUrl+item.styleImgs" mode=""></image>
              <image class="listDataInnerTopLeftImg" v-else src="/static/cuttingorder/cloth.png" mode=""></image>
						</view>
						<view class="listDataInnerTopRight">
              <text class="listDataInnerTopRightText">订单编号：{{item.orderCode}}</text>
              <text class="listDataInnerTopRightText">款式：{{item.styleName}}</text>
              <text class="listDataInnerTopRightText">日期：{{item.createTime}}</text>
              <text class="listDataInnerTopRightText" v-if="item.status=='0'">状态：未生产</text>
              <text class="listDataInnerTopRightText" v-if="item.status=='1'">状态：生产中</text>
              <text class="listDataInnerTopRightText" v-if="item.status=='2'">状态：生产完成</text>
						</view>

						<view class="listDataInnerTopRightImgBg">
<!--							<image class="listDataInnerTopRightImg" src="../../../static/gongzuotai/shanchu-red@2x.png" mode="">-->
<!--							</image>-->
						</view>

					</view>


					<view class="progress-box_out">

						<progress class="progress-box_progress" :percent="item.percent" activeColor="#0081FF"
							backgroundColor="#ECF5FD" stroke-width="4" active='true' />
						<text class="progress-box_text">完成度 </text>
						<text class="progress-box_text1">{{item.percent}}%</text>
					</view>

				</view>

			</view>


		</scroll-view>

			<!-- 、列表结束 -->
    <!--底部操作按键 点击列表弹出 start-->
    <uni-popup ref="popupBottom" type="bottom">
      <view class="bagDetail">

        <view class="baseList" v-for="(item,index) in listDataBottom" @click="OperationClickBottom(item)">
          <view class="baseListItem">
            <text class="baseListItemText" v-if="item.title!=='开始生产'">{{item.title}}</text>
            <text class="baseListItemText" v-if="item.title=='开始生产' && listItemData.status=='0'">{{item.title}}</text>
            <text class="baseListItemText" v-if="item.title=='开始生产' && listItemData.status=='1'">生产完成</text>
          </view>
          <view class="line" v-if="index!=5"></view>

          <view class="line_1" v-if="index==5"></view>
        </view>

      </view>
    </uni-popup>
    <!--底部操作按键 点击列表弹出 end-->


	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
  import searchInput from '@/components/searchInput.vue'
  import {orderPage} from "@/pages/api/api";
  import config from "@/pages/api/config";

	export default {
		components: {
			MyNav,
			bgImage,
			searchInput
		},
		data() {
			return {
        apiUrl: config.apiUrl,
        inputcontent:'款号',
				title:'订单列表',
				isback:true,
				scrollViewHeight:0,

				listData: [],

				mainTop: '',
        queryData: {
          styleName: '',
          storeId: '',
          tenantId: '',
          createTimeStart: '',
          createTimeEnd: '',
          status: '',
        },
        // 底部操作按键列表
        listDataBottom: [
          {
            title: '详情'
          },
          {
            title: '各工序情况'
          },
          {
            title: '各扎号情况'
          }
        ],
        listItemData: {},
			}
		},
    computed: {
      startDate() {
        return this.getDate('start');
      },
      endDate() {
        return this.getDate('end');
      }
    },
		onReady() {
			// 获取距离顶部的距离
						let query = uni.createSelectorQuery().in(this);
						query.select('#main').boundingClientRect(data => {
							// console.log(data);
							this.mainTop = data.top

							// 在其他页面或组件中访问
							const app = getApp();
							this.scrollViewHeight=app.globalData.system.screenHeight-this.mainTop-app.globalData.totalHeight


							/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
							console.log('滚动距离',this.scrollViewHeight); */
						}).exec();

		},
		onLoad: function (option) {
      console.log('option',option)
      if(option && Object.keys(option).length > 0){
        let item = JSON.parse(decodeURIComponent(option.item));
        if(item && item.status=='1'){
          this.queryData.status = item.status
        }
      }
      const app = getApp();
      this.queryData.storeId = app.globalData.storeId
      this.queryData.tenantId = app.globalData.tenantId
      this.loadData();
		},
		methods: {
      // 打开弹框
      openBottom(e) {
        console.log('点了');
        this.$refs.popupBottom.open('bottom')
        console.log('列表点击事件', e);
        this.listItemData = e
      },
      // 关闭尺码弹框
      closeBottom() {
        this.$refs.popupBottom.close()
      },
      OperationClickBottom(e) {
        switch (e.title) {
          case '详情':
            uni.navigateTo({
              url: '/pages/orderList/orderListDetail/orderListDetail?item=' +encodeURIComponent(JSON.stringify(this.listItemData)),
              success: res => {},
              fail: () => {},
              complete: () => {}
            });
            break
          case '各工序情况':
            uni.navigateTo({
              url: '/pages/orderList/orderListDetail/orderProcessDetail?item=' +encodeURIComponent(JSON.stringify(this.listItemData)),
              success: res => {},
              fail: () => {},
              complete: () => {}
            });
            break
          case '各扎号情况':
            uni.navigateTo({
              url: '/pages/orderList/orderListDetail/orderSplittingUpDetail?item=' +encodeURIComponent(JSON.stringify(this.listItemData)),
              success: res => {},
              fail: () => {},
              complete: () => {}
            });
            break
          default:
            break;
        }
      },
      loadData(){
        orderPage(this.queryData).then(res=>{
          if(res.code==200){
            this.listData = res.rows;
          }
        })
      },
			// 获取输入框的值
			getInputValue(e){
				console.log('获取输入框的值',e);
			},

			DetailClick(item){
				uni.navigateTo({
					url: '/pages/orderList/orderListDetail/orderListDetail?item=' +encodeURIComponent(JSON.stringify(item)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
      bindDateChange: function(e) {
        this.queryData.createTimeStart = e.detail.value
      },
      bindEndDateChange: function(e) {
        this.queryData.createTimeEnd= e.detail.value
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();

        if (type === 'start') {
          year = year - 60;
        } else if (type === 'end') {
          month = month + 1;
        }
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },

		}
	}
</script>

<style>


	.listDataInnerTopRightText {
			font-family: HarmonyOS Sans SC;
			font-weight: 600;
			font-size: 24rpx;
			color: #333333;
			line-height: 50rpx;
		}


		.listDataInnerTopRightImgBg {
			display: flex;
			justify-content: center;
			align-items: center;

			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}

		.listDataInnerTopRightImg {
			width: 50rpx;
			height: 50rpx;
			padding: 10rpx;

		}

		.listDataInnerTopRight {
			display: flex;
			flex-direction: column;
			align-items: left;


			margin-top: 30rpx;
		}

		.listDataInnerTopLeft {
			width: 190rpx;
			height: 190rpx;
			background: #ECF5FD;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			margin-right: 30rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
		}

		.listDataInnerTopLeftImg {
			width: 188rpx;
			height: 148rpx;

		}

		.progress-box_progress {
			display: flex;
			width: 380rpx;
			height: 10rpx;
			border-radius: 5rpx;
		}

		.progress-box_text {
			color: #666666;
			margin-left: 30rpx;
			font-size: 24rpx;
			font-weight: 600;
		}

		.progress-box_text1 {
			color: #0081FF;
			margin-left: 10rpx;
			font-size: 24rpx;
		}

		.progress-box {

			display: flex;
			flex-direction: row;

			display: flex;
			justify-conent: left;
			width: 380rpx;
			height: 6rpx;
			border-radius: 5rpx;

			/* background-color: #333333; */
		}

		.progress-box_out {
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;

			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;

			border-radius: 5rpx;

			/* background-color: #333333; */
		}


		.listDataInnerTop {
			position: relative;
			display: flex;
			flex-direction: row;

			display: flex;
			justify-content: left;
			width: 100%;
			/* background: #0AE1C6; */


		}

		.listDataOut {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 750rpx;
			margin-top: 30rpx;
			height: 800rpx;
		}


		.contentListOutInner{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

	}

		.listDataInner {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;

			width: 690rpx;
			height: 295rpx;
			background: #FFFFFF;
			border-radius: 30rpx;


			margin-bottom: 30rpx;
		}





	.searchPickerText {

		margin-left: 20rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;

	}

	.searchPickerImg {
		width: 20rpx;
		height: 10rpx;
		margin-right: 20rpx;

	}

	.searchPickerContentBg {
		width: 330rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-right: 15rpx;
		margin-left: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;


	}

	.searchPickerContent {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		margin-top: 30rpx;




	}



	.searchImg {
		width: 36rpx;
		height: 36rpx;
	}

	.searchBg {
		width: 100rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.searchInput {

		width: 590rpx;
		height: 100%;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #BBBBBB;
		line-height: 30rpx;
	}

	.searchContentOut {
		display: flex;
		justify-content: center;
	}

	.searchContent {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 30rpx;




	}
	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;

	}
  .line_1 {
    width: 100%;
    height: 16rpx;
    background: #F8F8F8;
  }
  .line {
    width: 100%;
    height: 1rpx;
    background-color: #EEEEEE;
    /* background: #EEEEEE; */
  }

  .baseListItemText {

    font-size: 24rpx;
    color: #333333;
    line-height: 100rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .baseListItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100rpx;
    justify-content: center;

  }


  .baseList {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;

  }
  .bagDetail {
    width: 750rpx;
    height: 357rpx;
    background: #FFFFFF;
    border-radius: 55rpx 55rpx 0rpx 0rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
</style>
